! function($) {
    $('.wx').on('mouseover', function() {
        $('#J_followWxImg').attr({ 'style': 'display: block' });
    }).on('mouseout', function() {
        $('#J_followWxImg').attr({ 'style': 'display: none' });
    })

    // 底部定时器
    function imgActive() {
        let timer = null;
        timer = setInterval(() => {
            $('.img2').show();
        }, 3000);
        timer = setInterval(() => {
            $('.img2').hide();
        }, 6000);
    }
    imgActive();

    // 购物车下移内容
    $('.topbar-cart').hover(function() {
        console.log(1);
        $('.cart-content').delay(1000).addClass('active');
        $(this).find('.cart-menu').stop().animate({
            height: 100
        }, 60);
    }, function() {
        console.log(2);

        // 队列控制背景的延迟消失
        $('.cart-content').delay(60).queue(function() {
            $(this).clearQueue();
            $(this).removeClass('active');
            // $(this).dequeue();
        });

        $(this).find('.cart-menu').stop().animate({
            height: 0
        }, 60);
    })

    // 下载吧下移图片
    $('.download').hover(function() {
        console.log(1);

        $(this).find('.appCode').stop().animate({
            height: 148
        }, 60);

    }, function() {
        console.log(2);
        $(this).find('.appCode').stop().animate({
            height: 0
        }, 60);
    })
}(jQuery);

// 导航下移内容
! function($) {
    const menuLi = $('.heater_title .heater-nav .item');
    const children = $('.heater_title .item-children');
    const contentsUL = $('.heater_title .container .contentUL');
    let timer = null;

    // menuLi移入出现下移菜单移出消失,延迟执行，节流
    menuLi.hover(function() {

        clearTimeout(timer);
        timer = setTimeout(() => {
            children.stop().animate({
                height: 230
            });
            contentsUL.eq($(this).index() - 1).show().siblings('ul').hide();
        }, 200)
    }, function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            children.stop().animate({
                height: 0
            });
        }, 200)
    })

    //children移入继续显示，移出收缩,延迟执行，一起异步
    children.hover(function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            $(this).stop().animate({
                height: 230
            });
        }, 200)
    }, function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            children.stop().animate({
                height: 0
            });
        }, 200)
    })

    // 搜索栏placeholder定时改变
    function placeholderTimer() {
        const placeholder = $('.heater_title .heater-search .search-text')
        let timer = null;
        timer = setInterval(() => {
            placeholder.attr('placeholder', '手机')
        }, 3000);

        timer = setInterval(() => {
            placeholder.attr('placeholder', '电脑')
        }, 6000);

        timer = setInterval(() => {
            placeholder.attr('placeholder', '平板')
        }, 9000);

        timer = setInterval(() => {
            placeholder.attr('placeholder', '2022新flag 新智能生活')
        }, 12000);
    }
    placeholderTimer();


}(jQuery);

! function($) {

    // 渲染
    $.ajax({
        url: 'http://localhost/JS2112/xiaomi/php/list.php',
        dataType: 'json'
    }).then(function(resData) {

        // 封装调用
        render(resData);



        // 分页
        $('.reuslt-order .page').pagination({
            pageCount: resData.pagesize, //总的页面
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            callback: function(qpi) {

                // console.log(qpi.getCurrent())
                $.ajax({
                    method: 'get',
                    url: 'http://localhost/JS2112/xiaomi/php/list.php',
                    data: {
                        page: qpi.getCurrent()
                    },
                    dataType: 'json'
                }).then(function(resData) {

                    // 封装调用
                    render(resData);

                });
            }
        });

        // 排序


        let sort = '';
        if (sort === '') {
            if (sort = 'asc') {
                sort = 'desc';
            } else {
                sort = 'asc';
            }
            console.log(1);
        } else if (sort === '') {
            sort = 'asc';
            console.log(2);
        }
        console.log(sort);

        $('.order-list-ul li a').eq(3).on('click', function() {

            $('.order-list-ul li a').removeClass('active');
            $(this).addClass('active');

            $('.reuslt-order .page').pagination({
                pageCount: resData.pagesize, //总的页面
                jump: true,
                coping: true,
                homePage: '首页',
                endPage: '末页',
                prevContent: '上页',
                nextContent: '下页',
                callback: function(qpi) {


                    // console.log(qpi.getCurrent())
                    $.ajax({
                        method: 'get',
                        url: 'http://localhost/JS2112/xiaomi/php/list.php',
                        data: {
                            page: qpi.getCurrent(),
                            sort: sort
                        },
                        dataType: 'json'
                    }).then(function(resData) {
                        // 封装调用
                        render(resData);

                    });
                }
            });

            $.ajax({
                url: 'http://localhost/JS2112/xiaomi/php/list.php',
                data: {
                    page: 1,
                    sort: sort
                },
                dataType: 'json'
            }).then(function(resData) {

                // 封装调用
                render(resData);

            });
        });



    });

    function render(resData) {
        let str = '';
        let arrData = resData.pagecontent;
        $.each(arrData, function(index, value) {
            str += `
                <li class="goods-item">
                    <a href="detail.html?sid=${value.id}">
                        <div class = "figure-img"><img class="lazy" data-original="${value.goods_img}"/></div>
                        <p>${value.goods_title}</p>
                        <span>${value.goods_price}元</span>
                        <div class = "thumbs"><ul><li class= "thumb-list"><img class="lazy" data-original="${value.goods_img}"/></li></ul></div>
                    </a>
                </li>
            `;
        });

        $('.goods-list ul').html(str);
        $("img.lazy").lazyload({
            threshold: 200,
            effect: "fadeIn"
        });
    }

}(jQuery);